<template>
  <div>
    <el-button
      type="primary"
      @click="dialogFormVisible=true"
    >打开弹框1</el-button>
    <el-button
      type="primary"
      @click="secondAlert=true"
    >打开弹框2</el-button>

    <!-- 弹框 情况一: ruleForm 属性全部存在 -->
    <el-dialog
      title="情况一"
      :visible.sync="dialogFormVisible"
      @close="close"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="活动名称"
          prop="name"
        >
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="活动区域"
          prop="region"
        >
          <el-select
            v-model="ruleForm.region"
            placeholder="请选择活动区域"
          >
            <el-option
              label="区域一"
              value="shanghai"
            ></el-option>
            <el-option
              label="区域二"
              value="beijing"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="活动时间"
          required
        >
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.date1"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col
            class="line"
            :span="2"
          >-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                placeholder="选择时间"
                v-model="ruleForm.date2"
                style="width: 100%;"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item
          label="即时配送"
          prop="delivery"
        >
          <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item
          label="活动性质"
          prop="type"
        >
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox
              label="美食/餐厅线上活动"
              name="type"
            ></el-checkbox>
            <el-checkbox
              label="地推活动"
              name="type"
            ></el-checkbox>
            <el-checkbox
              label="线下主题活动"
              name="type"
            ></el-checkbox>
            <el-checkbox
              label="单纯品牌曝光"
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="特殊资源"
          prop="resource"
        >
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="活动形式"
          prop="desc"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.desc"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
          >立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="close">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible = false"
        >确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="情况2"
      :visible.sync="secondAlert"
      @close="closeSencod"
    >
    <p>bug复现:当打开弹框会不输入任何值,直接点击取消后,再次打开会发现input内容填写不进去;因为spacForm里面没有任何属性</p>
      <el-form
        :model="spacForm"
        :rules="spacFormRules"
        ref="spacForm"
        label-width="100px"
      >
        <el-form-item
          label="姓名"
          prop="name"
        >
          <el-input v-model="spacForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="手机号"
          prop="phone"
        >
          <el-input v-model="spacForm.phone"></el-input>
        </el-form-item>
        <el-form-item
          label="年龄"
          prop="age"
        >
          <el-input v-model="spacForm.age"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('spacForm')"
          >立即创建</el-button>
          <el-button @click="resetForm('spacForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="closeSencod">取 消</el-button>
        <el-button
          type="primary"
          @click="closeSencod"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 自定义验证规则
import utils from "@/utils/utils.js";
export default {

  data() {
    // 自定义验证
    var checkMobile = (rule, value, callback) => {
      if (value) {
        utils.checkMobile(value, callback);
      } else {
        callback(new Error("请输入手机号码！"));
      }
    };
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      dialogFormVisible: false,
      //情况2
      secondAlert: false,
      spacForm: {},
      //自定义验证条件
      spacFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone: [{ required: true, validator: checkMobile, trigger: "blur" }],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 关闭弹框
    close() {
      this.dialogFormVisible = false;
      this.$refs.ruleForm.resetFields();
    },
    // 关闭弹框2
    closeSencod() {
      this.secondAlert = false;
        //如果 在 data中 spacForm 里面的内容为空 
        //那么如果想要清空表单和验证功能；就必须要在这一步重置表单；
        //   this.spacForm = {
        //     name:null,
        //     phone:null,
        //     age:null,
        //   }
      this.$refs.spacForm.resetFields();
    }
  }
}
</script>
<style lang="less" scoped>
</style>